<template>
  <div class="details">
    <a-spin :spinning="loading">
      <div class="base-info-content">
        <a-form :model="formState" autocomplete="off">
          <div class="base-info">
            <div class="title">基础信息</div>
            <a-row :gutter="8">
              <a-col v-for="(item, index) in formItemColumnMap[type]" :key="index" :span="8">
                <a-form-item v-bind="item" :label-col="{ style: 'width:130px' }" :wrapper-col="{ style: 'calc(100% - 130px)' }">
                  <span v-if="item.name === 'createTime'">
                    {{ dayjs(Number(formState.createTime)).format("YYYY-MM-DD HH:mm:ss") }}
                  </span>
                  <span v-else>{{ (formState as any)[item.name] || "-" }}</span>
                </a-form-item>
              </a-col>
            </a-row>
          </div>
        </a-form>
      </div>
      <div class="table-content">
        <div class="operation-btn">
          <a-button type="primary" v-debounce @click="ImportFeetHandle(passData)" v-if="activeKey === '1'">导入成本</a-button>
          <a-button type="primary" v-debounce @click="exportStatementHandle">导出对账</a-button>
          <a-button type="primary" v-debounce @click="generateAccountStatementHandle" v-if="activeKey === '1'">生成对账单</a-button>
        </div>
        <vxe-table border ref="customerAccountRef" show-overflow="title" height="600" :data="formState.statementShipmentListRes" :scroll-y="{ enabled: true, gt: 30 }">
          <vxe-column field="waybillNum" title="运单号" min-width="140" fixed="left"></vxe-column>
          <vxe-column field="service" title="服务" min-width="180">
            <template #default="{ row }">
              <span :class="{ red: !row.serviceDifferent }">{{ row.service }}</span>
            </template>
          </vxe-column>
          <vxe-column field="destination" title="目的地" min-width="90">
            <template #default="{ row }">
              <span :class="{ red: !row.destinationDifferent }">{{ row.destination }}</span>
            </template>
          </vxe-column>
          <vxe-column field="settlementWeight" title="结算重" min-width="90">
            <template #default="{ row }">
              <span :class="{ red: !row.weightDifferent }">{{ row.settlementWeight }}</span>
            </template>
          </vxe-column>
          <vxe-column field="adjustCost" title="成本调整" min-width="90"> </vxe-column>
          <vxe-column field="payableAmount" title="应付金额" min-width="120"></vxe-column>
          <vxe-column field="payableAmountSum" min-width="135" title="合计应付金额"> </vxe-column>
          <vxe-column field="receivableAmount" title="应收金额" min-width="70"></vxe-column>
          <vxe-column field="grossProfit" min-width="90" title="毛利润"> </vxe-column>
          <vxe-column field="profit" title="利润/KG" min-width="70"></vxe-column>
          <vxe-column field="discountFormula" title="优惠公式" min-width="135"> </vxe-column>
          <vxe-column v-if="type === 1" field="productRatio" title="货型比" min-width="135"> </vxe-column>
          <vxe-column v-if="type === 1" field="action" title="操作" min-width="220" fixed="right">
            <template #default="{ row }">
              <a-button type="link" @click="ModifyAdjustCostHandle(row)" v-if="activeKey === '1'">成本调整</a-button>
              <a-button type="link" @click="showFeeHandle(row)">查看费用</a-button>
              <a-button type="link" danger @click="showProblemHandle(row)" v-if="!row.serviceDifferent || !row.weightDifferent || !row.destinationDifferent">查看问题</a-button>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
    </a-spin>
    <!-- 抽屉 -->
    <a-drawer
      class="custom-drawer"
      v-model:visible="drawerOpts.visible"
      :title="drawerOpts.title"
      :maskClosable="false"
      :closable="true"
      :width="drawerOpts.width"
      @close="() => init()"
      placement="right"
    >
      <component v-model:visible="drawerOpts.visible" :is="drawerOpts.component" :type="drawerOpts.type" :pass-data="drawerOpts.passData" @submit="drawerSubmitHandle"></component>
    </a-drawer>
    <!-- 弹窗 -->
    <a-modal v-model:visible="dialogOpts.visible" :maskClosable="false" :keyboard="false" :closable="true" :footer="null" :title="dialogOpts.title" :width="dialogOpts.width">
      <component v-model:visible="dialogOpts.visible" :is="dialogOpts.component" :type="dialogOpts.type" :pass-data="dialogOpts.passData" @submit="dialogSubmitHandle"></component>
    </a-modal>
  </div>
</template>
<script lang="ts">
import ShowFee from "../showFee/index.vue";
import ShowIssue from "../showIssue/index.vue";
import ModifyAdjustCost from "../modifyAdjustCost/index.vue";
import ImportFee from "../importFee/index.vue";
export default {
  components: {
    ShowFee,
    ShowIssue,
    ModifyAdjustCost,
    ImportFee
  }
};
</script>
<script lang="ts" setup>
import dayjs from "dayjs";
import { provide, toRefs, watch, Ref } from "vue";
import ModalHook from "@/hook/modalHook";
import { formItemColumnMap } from "./data";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
const props = withDefaults(
  defineProps<{
    visible: boolean;
    passData: StatementPayable.ListRows;
    type: number; // 1 列表详情  2 待接收账单详情
    activeKey: string; // 1 未生成账单 2 已生成账单
  }>(),
  {}
);
const emit = defineEmits<{
  (e: "submit"): void;
}>();

const { visible, passData, type, activeKey } = toRefs(props);
provide<Ref<StatementPayable.ListRows>>("statementInfo", passData);
const { formState, customerAccountRef, init, loading, drawerOpts, dialogOpts } = InitHook({ passData, type });
const { generateAccountStatementHandle, exportStatementHandle, showFeeHandle, showProblemHandle, ModifyAdjustCostHandle, ImportFeetHandle } = OperationHook({
  dialogOpts,
  drawerOpts,
  init,
  passData,
  loading,
  emit
});
init();
watch(
  () => visible.value,
  (v: boolean) => {
    if (v) init();
  }
);
const { drawerSubmitHandle, dialogSubmitHandle } = ModalHook({
  drawerOpts,
  dialogOpts,
  callBack: () => init()
});
</script>
<style lang="stylus" scoped>
.details{
    background-color: #fff;
    padding: 12px;
    height: 100%;
    .title{
        font-weight: 600;
    }
    .base-info-content{
        font-weight: 600;
    }
    .operation-btn{
        padding-bottom: 12px;
        text-align: right;
        :deep(.ant-btn){
            margin-right: 8px;
        }
    }
    .red{
        color: red;
    }
}
</style>
